/*
  学习目标：使用PureComponent自动决定是否更新 - 优化性能
  步骤：
     1. 
     2. 
     3. 
*/

import React, { Component } from 'react';

export default class App extends Component {
  state = {
    count: 0,
    msg: 'hello React',
    title: '81',
  };

  render() {
    const { count, msg, title } = this.state;
    return (
      <div>
        <h1>{title}</h1>
        <button onClick={() => this.setState({ title: title + '!' })}>+!修改title</button>

        <h1>{count}</h1>
        <button onClick={() => this.setState({ count: count + 1 })}>+1修改count</button>

        <h1>{msg}</h1>
        <button onClick={() => this.setState({ msg: msg + '~' })}>+~修改msg</button>
        <Child msg={msg} count={count} />
      </div>
    );
  }
}

class Child extends React.PureComponent {
  // PureComponent源码内部实现了shouldComponentUpdate, 会自动比较新旧props的变化
  // 变化时决定更新, 无变化时不更新

  // shouldComponentUpdate(nextProps) {
  //   if (nextProps.count !== this.props.count) {
  //     return true;
  //   }

  //   if (nextProps.msg !== this.props.msg) {
  //     return true;
  //   }

  //   return false;
  // }

  render() {
    return (
      <div>
        props和msg - {this.props.count} - {this.props.msg}
      </div>
    );
  }

  componentDidUpdate() {
    console.log('更新后执行了  ----->  ');
  }
}
